<template>
  <ScaleScreen :width="4500" :height="1080" class="scale-wrap" :selfAdaption="$store.state.setting.isScale2">
    <div class="bg" :class="[`bg${currPage}`]" style="pointer-events: none;">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!-- 头部 s -->
        <div class="d-flex jc-center title_wrap">
          <div class="d-flex jc-center">
            <div class="title">
              <span class="title-text" @click="changeTitle">{{ title }}</span>
            </div>
          </div>
          <div class="timers">
            <i class="blq-icon-shezhi02" style="margin-left: 10px" @click="showSetting"></i>
          </div>
        </div>
        <div class="super_bg">
          <!-- <SuperBackground style="pointer-events: auto;" /> -->
        </div>
        <div class="bottom_jb">
          <jb />
        </div>
        <div class="bottom_wrap">
          <div class="box_warp" style="pointer-events: auto;">
            <div class="left" @click="toNav('left')"></div>
            <div class="box" :class="{ actived: currPage === 0 }" @click="toNav(0)">
              商贸物流
            </div>
            <div class="box" :class="{ actived: currPage === 1 }" @click="toNav(1)">
              数字货运
            </div>
            <div class="box" :class="{ actived: currPage === 2 }" @click="toNav(2)">
              智慧园区
            </div>
            <div class="box" :class="{ actived: currPage === 3 }" @click="toNav(3)">
              运输车辆
            </div>
            <div class="box" :class="{ actived: currPage === 4 }" @click="toNav(4)">
              国际贸易
            </div>
            <div class="box" :class="{ actived: currPage === 5 }" @click="toNav(5)">
              数据应用
            </div>
            <div class="right" @click="toNav('right')"></div>
          </div>
        </div>
        <!-- <div class="bottom-flag">{{ now }}</div> -->
        <!-- 头部 e-->
        <!-- 内容  s-->
        <transition :name="transitionName">
          <router-view class="router-view"></router-view>
        </transition>
        <!-- 内容 e -->
      </div>
    </div>
    <Setting ref="setting" />
  </ScaleScreen>
</template>

<script>
import { formatTime } from '../utils/index.js';
import Setting from './setting.vue';
import Jb from './jb-box.vue';
import ScaleScreen from '@/components/scale-screen/scale-screen.vue';
import SuperBackground from '@/components/SuperBackground.vue';

export default {
  components: { Setting, ScaleScreen, SuperBackground, Jb },
  data() {
    return {
      title: '商贸物流行业数据流通服务平台',
      transitionName: 'slide-left',
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      now: '数据统计截止日期为2024年5月20日',
      currPage: this.$store.state.setting.pageNo
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  watch: {
    '$store.state.setting.pageNo'(newValue, oldValue) {
      this.currPage = newValue
    }
  },
  created() { },
  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    changeTitle() {
      if (this.title == '临沂商贸物流大数据平台') {
        this.title = '商贸物流行业数据流通服务平台';
      } else if (this.title == '商贸物流行业数据流通服务平台') {
        this.title = '山东省商贸物流产业大脑';
      } else {
        this.title = '临沂商贸物流大数据平台';
      }
      // this.title = this.title == '临沂商贸物流大数据平台' ? '山东省商贸物流产业大脑' : '临沂商贸物流大数据平台';
    },
    showSetting() {
      this.$refs.setting.init();
    },
    timeFn() {
      // this.timing = setInterval(() => {
      //   this.dateDay = formatTime(new Date(), 'HH: mm: ss');
      //   this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
      //   var curDate = new Date();
      //   var preDate = new Date(curDate.getTime() - 24 * 60 * 60 * 1000);
      //   this.now = formatTime(preDate, '数据统计截止日期为yyyy年MM月dd日');
      //   this.dateWeek = this.weekday[new Date().getDay()];
      // }, 1000);
      this.$nextTick(() => {
        this.$router.push(`/launch/index`)
        //   const currPage = ['index', 'internet', 'pack', 'car', 'inout', 'avator'][
        //   currIdx
        // ];
        //   this.$store.commit('setting/setPageNo', currIdx);
      })
    },
    cancelLoading() {
      let timer = setTimeout(() => {
        this.loading = false;
        clearTimeout(timer);
      }, 500);
    },
    toNav(idx) {
      let currIdx = this.currPage;
      if (idx === 'left') {
        if (currIdx === 0) {
          currIdx = 5;
        } else {
          currIdx -= 1;
        }
      } else if (idx === 'right') {
        if (currIdx === 5) {
          currIdx = 0;
        } else {
          currIdx += 1;
        }
      } else {
        currIdx = idx;
      }
      this.transitionName =
        currIdx < this.currPage
          ? 'slide-right'
          : 'slide-left';
      this.$store.commit('setting/setPageNo', currIdx);
      const currPage = ['index', 'internet', 'pack', 'car', 'inout', 'avator'][
        currIdx
      ];

      this.$router.push(`/launch/${currPage}`);
    },
  },
};
</script>

<style lang="scss">
@import './launch.scss';

.router-view {
  position: absolute;
  width: 100%;
  // transition: all 0.4s;
}

.slide-left-enter,
.slide-right-leave-active {
  // opacity: 0;
  // transform: translate(100%, 0); // 从右往左
  // // transform: translate(-100%, 0); // 从左往右
  // // transform: translate(0, 100%); // 从下往上
  // // transform: translate(0, -100%); // 从上往下
}

.slide-left-leave-active,
.slide-right-enter {
  // opacity: 0;
  // transform: translate(-100%, 0); // 从右往左
  // // transform: translate(100%, 0); // 从左往右
  // // transform: translate(0, -100%); // 从下往上
  // // transform: translate(0, 100%); // 从上往下
}
</style>
